<template>
  <div class="order-cancel">
    <el-collapse accordion>
      <el-alert
        title="今天"
        type="success"
        :closable="false">
      </el-alert>
      <el-collapse-item>
        <template slot="title">
          <div class="order-brief">
            <div class="order-detail-item order-top">
              <p class="order-num">
                <i class=" xq-icon icon-chongzhidingdanhao"></i>
                <span class="order-number">订单号: 2018715142519</span>
                <span class="order-complete-time">订单取消时间: 2018年7月15日22:27:40</span>
              </p>
              <p class="order-status"><i class="el-icon-circle-close-outline"></i>订单已取消，原因：货存不足</p>
              <p class="order-sum-price"><i class=" xq-icon icon-jiage"></i>总价: ¥46</p>
            </div>
            <div class="order-detail-item order-buttom">
              <p class="order-dish">商品: 叉烧饭*1 + 王老吉*2</p>
              <p class="order-extra">商品备注: 多加辣多加辣多加辣</p>
            </div>
          </div>
        </template>
        <div class="order-detail">
          <div class="deliver-info clearfix">
            <div class="customerInfo">
              <p class="customerName"><i class="xq-icon icon-lvzhou_gukehuizong"></i>顾客: 王先生</p>
              <p><i class="xq-icon icon-shouji1"></i>联系电话: 13800138000</p>
              <p><i class=" xq-icon icon-dizhi01"></i>送货地址: 仲恺农业工程学院7栋宿舍门口</p>
              <p><i class=" xq-icon icon-daodashijian"></i>要求送达时间: 尽快送达</p>
            </div>
            <div class="delivermanInfo">
              <p class="deliverymanName"><i class=" xq-icon icon-peisong"></i>配送员: 刘女士</p>
              <p><i class=" xq-icon icon-shouji"></i>联系电话: 13800138000</p>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-alert
        title="昨天"
        type="success"
        :closable="false">
      </el-alert>
      <el-collapse-item>
        <template slot="title">
          <div class="order-brief">
            <div class="order-detail-item order-top">
              <p class="order-num">
                <i class=" xq-icon icon-chongzhidingdanhao"></i>
                <span class="order-number">订单号: 2018715142519</span>
                <span class="order-complete-time">订单取消时间: 2018年7月15日22:27:40</span>
              </p>
              <p class="order-status"><i class="el-icon-circle-close-outline"></i>订单已取消，原因：货存不足</p>
              <p class="order-sum-price"><i class=" xq-icon icon-jiage"></i>总价: ¥46</p>
            </div>
            <div class="order-detail-item order-buttom">
              <p class="order-dish">商品: 叉烧饭*1 + 王老吉*2</p>
              <p class="order-extra">商品备注: 多加辣多加辣多加辣</p>
            </div>
          </div>
        </template>
        <div class="order-detail">
          <div class="deliver-info clearfix">
            <div class="customerInfo">
              <p class="customerName"><i class="xq-icon icon-lvzhou_gukehuizong"></i>顾客: 王先生</p>
              <p><i class="xq-icon icon-shouji1"></i>联系电话: 13800138000</p>
              <p><i class=" xq-icon icon-dizhi01"></i>送货地址: 仲恺农业工程学院7栋宿舍门口</p>
              <p><i class=" xq-icon icon-daodashijian"></i>要求送达时间: 尽快送达</p>
            </div>
            <div class="delivermanInfo">
              <p class="deliverymanName"><i class=" xq-icon icon-peisong"></i>配送员: 刘女士</p>
              <p><i class=" xq-icon icon-shouji"></i>联系电话: 13800138000</p>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
          <div class="order-brief">
            <div class="order-detail-item order-top">
              <p class="order-num">
                <i class=" xq-icon icon-chongzhidingdanhao"></i>
                <span class="order-number">订单号: 2018715142519</span>
                <span class="order-complete-time">订单取消时间: 2018年7月15日22:27:40</span>
              </p>
              <p class="order-status"><i class="el-icon-circle-close-outline"></i>订单已取消，原因：货存不足</p>
              <p class="order-sum-price"><i class=" xq-icon icon-jiage"></i>总价: ¥46</p>
            </div>
            <div class="order-detail-item order-buttom">
              <p class="order-dish">商品: 叉烧饭*1 + 王老吉*2</p>
              <p class="order-extra">商品备注: 多加辣多加辣多加辣</p>
            </div>
          </div>
        </template>
        <div class="order-detail">
          <div class="deliver-info clearfix">
            <div class="customerInfo">
              <p class="customerName"><i class="xq-icon icon-lvzhou_gukehuizong"></i>顾客: 王先生</p>
              <p><i class="xq-icon icon-shouji1"></i>联系电话: 13800138000</p>
              <p><i class=" xq-icon icon-dizhi01"></i>送货地址: 仲恺农业工程学院7栋宿舍门口</p>
              <p><i class=" xq-icon icon-daodashijian"></i>要求送达时间: 尽快送达</p>
            </div>
            <div class="delivermanInfo">
              <p class="deliverymanName"><i class=" xq-icon icon-peisong"></i>配送员: 刘女士</p>
              <p><i class=" xq-icon icon-shouji"></i>联系电话: 13800138000</p>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-alert
        title="更早以前"
        type="success"
        :closable="false">
      </el-alert>
      <el-collapse-item>
        <template slot="title">
          <div class="order-brief">
            <div class="order-detail-item order-top">
              <p class="order-num">
                <i class=" xq-icon icon-chongzhidingdanhao"></i>
                <span class="order-number">订单号: 2018715142519</span>
                <span class="order-complete-time">订单取消时间: 2018年7月15日22:27:40</span>
              </p>
              <p class="order-status"><i class="el-icon-circle-close-outline"></i>订单已取消，原因：货存不足</p>
              <p class="order-sum-price"><i class=" xq-icon icon-jiage"></i>总价: ¥46</p>
            </div>
            <div class="order-detail-item order-buttom">
              <p class="order-dish">商品: 叉烧饭*1 + 王老吉*2</p>
              <p class="order-extra">商品备注: 多加辣多加辣多加辣</p>
            </div>
          </div>
        </template>
        <div class="order-detail">
          <div class="deliver-info clearfix">
            <div class="customerInfo">
              <p class="customerName"><i class="xq-icon icon-lvzhou_gukehuizong"></i>顾客: 王先生</p>
              <p><i class="xq-icon icon-shouji1"></i>联系电话: 13800138000</p>
              <p><i class=" xq-icon icon-dizhi01"></i>送货地址: 仲恺农业工程学院7栋宿舍门口</p>
              <p><i class=" xq-icon icon-daodashijian"></i>要求送达时间: 尽快送达</p>
            </div>
            <div class="delivermanInfo">
              <p class="deliverymanName"><i class=" xq-icon icon-peisong"></i>配送员: 刘女士</p>
              <p><i class=" xq-icon icon-shouji"></i>联系电话: 13800138000</p>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
          <div class="order-brief">
            <div class="order-detail-item order-top">
              <p class="order-num">
                <i class=" xq-icon icon-chongzhidingdanhao"></i>
                <span class="order-number">订单号: 2018715142519</span>
                <span class="order-complete-time">订单取消时间: 2018年7月15日22:27:40</span>
              </p>
              <p class="order-status"><i class="el-icon-circle-close-outline"></i>订单已取消，原因：货存不足</p>
              <p class="order-sum-price"><i class=" xq-icon icon-jiage"></i>总价: ¥46</p>
            </div>
            <div class="order-detail-item order-buttom">
              <p class="order-dish">商品: 叉烧饭*1 + 王老吉*2</p>
              <p class="order-extra">商品备注: 多加辣多加辣多加辣</p>
            </div>
          </div>
        </template>
        <div class="order-detail">
          <div class="deliver-info clearfix">
            <div class="customerInfo">
              <p class="customerName"><i class="xq-icon icon-lvzhou_gukehuizong"></i>顾客: 王先生</p>
              <p><i class="xq-icon icon-shouji1"></i>联系电话: 13800138000</p>
              <p><i class=" xq-icon icon-dizhi01"></i>送货地址: 仲恺农业工程学院7栋宿舍门口</p>
              <p><i class=" xq-icon icon-daodashijian"></i>要求送达时间: 尽快送达</p>
            </div>
            <div class="delivermanInfo">
              <p class="deliverymanName"><i class=" xq-icon icon-peisong"></i>配送员: 刘女士</p>
              <p><i class=" xq-icon icon-shouji"></i>联系电话: 13800138000</p>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
          <div class="order-brief">
            <div class="order-detail-item order-top">
              <p class="order-num">
                <i class=" xq-icon icon-chongzhidingdanhao"></i>
                <span class="order-number">订单号: 2018715142519</span>
                <span class="order-complete-time">订单取消时间: 2018年7月15日22:27:40</span>
              </p>
              <p class="order-status"><i class="el-icon-circle-close-outline"></i>订单已取消，原因：货存不足</p>
              <p class="order-sum-price"><i class=" xq-icon icon-jiage"></i>总价: ¥46</p>
            </div>
            <div class="order-detail-item order-buttom">
              <p class="order-dish">商品: 叉烧饭*1 + 王老吉*2</p>
              <p class="order-extra">商品备注: 多加辣多加辣多加辣</p>
            </div>
          </div>
        </template>
        <div class="order-detail">
          <div class="deliver-info clearfix">
            <div class="customerInfo">
              <p class="customerName"><i class="xq-icon icon-lvzhou_gukehuizong"></i>顾客: 王先生</p>
              <p><i class="xq-icon icon-shouji1"></i>联系电话: 13800138000</p>
              <p><i class=" xq-icon icon-dizhi01"></i>送货地址: 仲恺农业工程学院7栋宿舍门口</p>
              <p><i class=" xq-icon icon-daodashijian"></i>要求送达时间: 尽快送达</p>
            </div>
            <div class="delivermanInfo">
              <p class="deliverymanName"><i class=" xq-icon icon-peisong"></i>配送员: 刘女士</p>
              <p><i class=" xq-icon icon-shouji"></i>联系电话: 13800138000</p>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: 'OrderCancel',
  data () {
    return {
      content: '',
      tableData: [{
        dishName: '鸡蛋炒河粉',
        num: '2',
        price: '6.00'
      }],
      num: []
    }
  }
}
</script>
<style lang="stylus">
  .order-cancel
    .el-collapse-item__header
      height: auto
      line-height: 32px
    .el-collapse-item__arrow
      display none
    .el-collapse-item__content
      border-top: 1px solid #ccc
      padding 10px 0 8px 0
</style>
<style lang="stylus" scoped>
  @import "../../assets/css/base.styl"
  .order-cancel
    width $width
    margin: 0 auto
    padding-left 170px
    box-sizing border-box
    .el-alert
      font-size 20px
      margin 10px 0
    i
      margin-right 6px
    .el-collapse
      background-color: #f5f5f6
      .el-collapse-item
        padding 10px 15px
        border-radius: 6px
        background-color: #fff
        margin-bottom: 10px
        .order-brief
          color: #999
          .order-buttom
            padding-bottom 8px
            p
              display inline-block
            .order-extra
              margin-left 12px
          .order-top
            position: relative
            padding-top 8px
            .order-complete-time
              margin-left 80px
            .order-status
              position: absolute
              right: 0
              top: 8px
            .order-sum-price
              float: right
            .el-button
              position: absolute
              right: 20px
              top: 20px
            .cancel-btn
              right: 120px
        .order-detail
          .customerInfo
            float: left
          .delivermanInfo
            padding-right 10px
            margin-right 20px
            float: right
</style>
